<template>
  <div class="chat-page">
    <a-card class="chat-card" :bordered="false">
      <template #title>
        <span style="font-size:1.3rem;font-weight:600;color:#1890ff;">
          <i class="anticon anticon-robot" style="margin-right:8px;"></i>投资AI问答助手
        </span>
      </template>
      <div class="chat-window">
        <div v-for="(msg, idx) in messages" :key="idx" :class="['msg', msg.role]">
          <template v-if="msg.role === 'bot'">
            <a-avatar class="msg-avatar" style="background:#1890ff; margin-right:10px;">
              <template #icon>
                <svg viewBox="0 0 24 24" width="22" height="22"><circle cx="12" cy="12" r="10" fill="#fff"/><rect x="7" y="14" width="10" height="2" rx="1" fill="#1890ff"/><circle cx="9.5" cy="11" r="1.2" fill="#1890ff"/><circle cx="14.5" cy="11" r="1.2" fill="#1890ff"/></svg>
              </template>
            </a-avatar>
            <div class="msg-content">{{ msg.content }}</div>
          </template>
          <template v-else>
            <div class="msg-content">{{ msg.content }}</div>
            <a-avatar class="msg-avatar" style="background:#52c41a; margin-left:10px;">
              <template #icon>
                <i class="anticon anticon-user"></i>
              </template>
            </a-avatar>
          </template>
        </div>
      </div>
      <div class="chat-input-container">
        <a-input
          v-model:value="input"
          placeholder="请输入您的投资问题..."
          @pressEnter="sendMsg"
          size="large"
          style="border-radius:20px;"
        >
          <template #prefix>
            <i class="anticon anticon-message"></i>
          </template>
        </a-input>
        <a-button type="primary" @click="sendMsg" style="margin-left:12px;border-radius:20px;" size="large">
          <template #icon>
            <i class="anticon anticon-send"></i>
          </template>
          发送
        </a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
const messages = ref([
  { role: 'bot', content: '您好，我是您的投资AI助手，有什么想了解的投资知识吗？' }
])
function sendMsg() {
  if (!input.value.trim()) return
  messages.value.push({ role: 'user', content: input.value })
  // 静态模拟AI回复
  setTimeout(() => {
    messages.value.push({ role: 'bot', content: '在当前全球通胀压力持续的市场环境中，构建抗通胀投资组合需要兼顾资产保值与增长潜力。以下是专业建议：\n1. 配置黄金等避险资产，以对冲通胀风险。\n2. 增加股票投资比例，关注具有定价权的行业龙头。\n3. 考虑通胀挂钩债券，获取稳定收益。\n' })
  }, 600)
  input.value = ''
}
</script>
<script>
export default {
  name: 'InvestmentChat'
}
</script>

<style scoped>
.chat-page {
  max-width: 700px;
  margin: 60px auto;
}
.chat-card {
  min-height: 480px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(24,144,255,0.08);
}
.chat-window {
  min-height: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}
.msg.user {
  justify-content: flex-end;
}
.msg.bot {
  justify-content: flex-start;
}
.msg-avatar {
  flex-shrink: 0;
}
.msg-content {
  background: #e6f7ff;
  color: #1890ff;
  padding: 10px 18px;
  border-radius: 16px;
  max-width: 70%;
  word-break: break-all;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(24,144,255,0.04);
}
.msg.user .msg-content {
  background: #d9f7be;
  color: #52c41a;
}
.chat-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 0 0;
}
@media (max-width: 768px) {
  .chat-page {
    margin: 20px auto;
    max-width: 98vw;
  }
  .chat-window {
    padding: 10px;
  }
  .msg-content {
    font-size: 0.95rem;
    padding: 8px 10px;
  }
  .chat-input-container {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
